<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <qc-button @syClick="sysClick" type="primary">你好</qc-button>
    <qc-select v-model="dataForm.test1" :config="{
      url: '',
      label: 'label',
      value: 'value',
      clearable: true,
      list: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }
      ]
    }" @change="selectChange"></qc-select>
    <qc-form ref="systemForm" :form="dataForm" :rules="dataRules" :config="dataFormConfig" />
    <qc-tree :config="treeConfig" v-model="dataForm.treeValue" v-on="treeEvents"></qc-tree>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { QuickForm } from '@/index'
import 'element-ui/lib/theme-chalk/button.css'
import 'element-ui/lib/theme-chalk/form.css'
import 'element-ui/lib/theme-chalk/form-item.css'
import 'element-ui/lib/theme-chalk/col.css'
import 'element-ui/lib/theme-chalk/input.css'
import 'element-ui/lib/theme-chalk/row.css'
import 'element-ui/lib/theme-chalk/select.css'
import 'element-ui/lib/theme-chalk/tree.css'
import 'element-ui/lib/theme-chalk/icon.css'
import 'element-ui/lib/theme-chalk/table.css'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      treeData: [],
      treeData1: [
        {
          id: '1',
          label: '一级 1',
          children: [{
            id: '1-1',
            label: '二级 1-1',
            children: [
              {
                id: '1-1-1',
                label: '三级 1-1-1'
              },
              {
                id: '1-1-2',
                label: '三级 1-1-2'
              }
            ]
          }]
        }
      ],
      treeConfig: {
        showCheckbox: true,
        nodeKey: 'id'
      },
      treeEvents: {
        keysChange(a, b, c) {
          console.log(a, b, c)
        }
      },
      dataForm: {
        id: '',
        fieldKey: '',
        fieldName: '',
        fieldType: '',
        fieldLength: '',
        fieldSort: '',
        treeValue: '222'
      },
      dataFormConfig: {
        _baseConfig: { span: 24 },
        id: {
          label: 'id'
        },
        fieldKey: {
          label: '属性值',
          required: true
        },
        fieldName: {
          label: '属性名称',
          hidden: 'id!!'
        },
        fieldType: {
          label: '属性类型',
          required: true,
          type: 'select',
          config: {
            label: 'label',
            value: 'value',
            link: 'fieldName',
            list: [
              {
                value: '选项1',
                label: '黄金糕'
              }, {
                value: '选项2',
                label: '双皮奶'
              }, {
                value: '选项3',
                label: '蚵仔煎'
              }, {
                value: '选项4',
                label: '龙须面'
              }, {
                value: '选项5',
                label: '北京烤鸭'
              }
            ]
          },
          events: {
            change(val) {
            }
          }
        },
        fieldLength: {
          label: '属性长度',
          required: true,
          slot: true
        },
        fieldSort: {
          label: '排序',
          slot: true
        },
        treeValue: {
          hidden: false,
          label: '树结构',
          type: 'select',
          config: {
            type: 'tree',
          }
        },
      },
      dataRules: {}
    }
  },
  mounted() {
    setTimeout(() => {
      this.dataForm.treeValue = '1-1-1'
      // this.treeData = this.treeData1
      // this.dataForm.treeValue = '1-1'

    }, 3000)
  },
  methods: {
    selectChange() { },
    sysClick() { }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
